import React from 'react';
import { View, StyleSheet, ViewStyle, Platform } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { useTheme } from './theme/ThemeContext';

interface SelectItem {
  label: string;
  value: string;
}

interface ThemedSelectProps {
  value: string;
  onValueChange: (value: string) => void;
  items: SelectItem[];
  placeholder?: string;
  style?: ViewStyle;
}

export function ThemedSelect({
  value,
  onValueChange,
  items,
  placeholder,
  style,
}: ThemedSelectProps) {
  const { theme } = useTheme();

  return (
    <View 
      style={[
        styles.container, 
        { 
          borderColor: theme.colors.border,
          backgroundColor: theme.colors.background 
        }, 
        style
      ]}
    >
      <Picker
        selectedValue={value}
        onValueChange={onValueChange}
        style={[
          styles.picker,
          Platform.select({
            android: {
              backgroundColor: theme.colors.background,
              color: theme.colors.text,
              height: 56,
            },
            ios: {
              backgroundColor: theme.colors.card,
              height: 56,
            }
          })
        ]}
        dropdownIconColor={theme.colors.text}
      >
        {placeholder && (
          <Picker.Item
            label={placeholder}
            value=""
            color={theme.colors.placeholder}
            style={Platform.select({
              android: {
                backgroundColor: theme.colors.card,
              }
            })}
          />
        )}
        {items.map((item) => (
          <Picker.Item
            key={item.value}
            label={item.label}
            value={item.value}
            color={theme.colors.text}
            style={Platform.select({
              android: {
                backgroundColor: theme.colors.card,
              }
            })}
          />
        ))}
      </Picker>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderRadius: 8,
    overflow: 'hidden',
    minHeight: 56,
  },
  picker: {
    width: '100%',
  },
}); 